<template>
  <div class="image-container" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
    <img :src="beautiful" alt="Zoomable Image" class="zoomable-image" />
    <div v-if="isZooming" class="magnifier" :style="magnifierStyle">
		<!-- <img :src="beautiful"  :style="zoomedImageStyle" /> -->
	</div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import beautiful from '@/assets/images/qp.jpg'
// const imageSrc = ref('path/to/your/image.jpg');
const zoomFactor = ref(2); // 初始放大倍数
const mousePosition = ref({ x: 0, y: 0 });
const isZooming = ref(false);

const handleMouseMove = (event) => {
  mousePosition.value = { x: event.clientX, y: event.clientY };
  isZooming.value = true;
};

const handleMouseLeave = () => {
  isZooming.value = false;
};

const magnifierStyle = computed(() => {
  if (!isZooming.value) return {};
  const { x, y } = mousePosition.value;
  const scale = zoomFactor.value;
  const width = 200 / scale; // 放大镜大小
  const height = 200 / scale;
  const left = x - width / 2;
  const top = y - height / 2;
  return {
    width: `${width}px`,
    height: `${height}px`,
    left: `${left}px`,
    top: `${top}px`,
    transform: `scale(${scale})`,
    border: '3px solid rgba(0, 0, 0, 0.5)',
    position: 'absolute',
    overflow: 'hidden',
    pointerEvents: 'none',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  };
});
// const {elementBounding} = useMouseInElement(target)
// const { x, y } = useMouse();
// const zoomedImageStyle = computed(() => ({
//   transform: `translateX(${x.value - elementBounding.left - elementBounding.width / 2}px) translateY(${y.value - elementBounding.top - elementBounding.height / 2}px) scale(${zoomFactor.value})`,
// }));
</script>

<style scoped>
.image-container {
  position: relative;
  display: inline-block;
}

.zoomable-image {
  width: 100%;
  height: auto;
  display: block;
}

.magnifier img {
  position: absolute;
  width: 100%;
  height: auto;
  transform: scale(1 / var(--zoom-factor, 1)); /* 这里需要动态设置，但 CSS 不支持变量计算 */
}
/* 注意：上面的 CSS 中的 transform 可能需要 JavaScript 来动态设置 */
</style>
